<template>
	<view class="yxyl-inputs">
		<block v-for="(item, index) in inputs" :key="index">
			<view class="yxyl-input-item" v-if="item.type == 'text'">
				<label class="title">{{ item.title }}:</label>
				<input class="content input" v-model="dataModel[index].value" type="text" :placeholder="item.placeholder || ''" />
			</view>
			<view class="yxyl-input-item" v-else-if="item.type == 'number'">
				<label class="title">{{ item.title }}:</label>
				<input class="content input"  v-model="dataModel[index].value" type="number" :placeholder="item.placeholder || ''" />
			</view>
		
			<view class="yxyl-input-item" v-else-if="item.type == 'idcard'">
				<label class="title">{{ item.title }}:</label>
				<input class="content input"  v-model="dataModel[index].value" type="idcard" :placeholder="item.placeholder || ''" />
			</view>
			<view class="yxyl-input-item" v-else-if="item.type == 'radio'">
				<label class="title">{{ item.title }}</label>
				<view class="content">
					<radio-group @change="radioChange" :data-index="index">
						<radio
							class="yxyl-raido"
							v-for="(_item, _index) in item.range"
							:key="_index"
							:value="_item.value"
							:checked="_item.value == (item.default || dataModel[index].value)"
							color="#28A745"
						>
							{{ _item.text }}
						</radio>
					</radio-group>
				</view>
			</view>
			<view class="yxyl-input-item" v-else-if="item.type == 'address'">
				<label class="title">{{ item.title }}:</label>
				<picker
					mode="multiSelector"
					@columnchange="bindMultiPickerColumnChange"
					@change="addressChange"
					:value="multiIndex"
					:range="regions"
					range-key="text"
					:data-index="index"
					:data-level="item.level"
					class="content"
				>
					<view>{{ addressMsg }}</view>
				</picker>
			</view>
			<view class="yxyl-input-item" v-else-if="item.type == 'date'">
				<label class="title">{{ item.title }}:</label>
				<view class="content">
					<picker mode="date" :value="item.default" :start="item.startDate" :end="item.endDate" @change="bindDateChange" :data-index="index">
						<view>{{ dataModel[index].value }}</view>
					</picker>
				</view>
			</view>
		</block>
		<slot></slot>
		<button type="primary" @tap="confirm" class="confirmText">{{ confirmText }}</button>
	</view>
</template>

<script>
import { region } from './region.js';
export default {
	props: {
		inputs: {
			type: Array,
			default() {
				return [
					// { title: '名字', key: 'userName', placeholder: '请输入名字', required: true, type: 'text', errMsg: '请输入名字'},
					// { title: '电话', key: 'telephone', placeholder: '请输入名字', required: true, type: 'number', errMsg: '请输入电话' },
					// { title: '性别', key: 'sex', type: 'radio', range: [{ text: '男', value: '1', checked: false }, { text: '女', value: '2', checked: true }] },
					// { title: '省市区', keys: ['id1', 'id2', 'id3'], type: 'address', level: 3, default: ['0105', '010501', '01050101'] }
					//{title:'生日',key:'birthDay',type:'date',default:'1921-01-01',startDate:'1919-01-01',endDate:'2019-01-01'}
				];
			}
		},

		confirmText: {
			type: String,
			default: '确认'
		}
	},
	data() {
		return {
			dataModel: [],
			regions: [],
			multiIndex: [0, 0, 0],
			addressMsg: '',
			dateStr: ''
		};
	},
	created() {	
		for (let index in this.inputs) {
			var item = this.inputs[index];
			if (item.type == 'date') {
				this.dateStr = item.default;
			}
			if (item.type != 'address') {
				
				if (item.default) {
					
					this.dataModel[index] = { value: item.default };
				} else {
					this.dataModel[index] = { value: '' };
				}
			} else {
				var index_1 = 0,
					index_2 = 0,
					index_3 = 0;
				if (item.level == 1) {
					if (item.default) {
						index_1 = region.findIndex(value => {
							return value.id == item.default[0];
						});
					}
					this.regions = [region];
					this.multiIndex = [index_1];
					this.addressMsg = region[index_1].text;
					this.hanlerRegionIds(item.keys, index, [region[index_1].id]);
				} else if (item.level == 2) {
					if (item.default) {
						index_1 = region.findIndex(value => {
							return value.id == item.default[0];
						});
						index_2 = region[index_1].son.findIndex(value => {
							return value.id == item.default[1];
						});
					}
					this.regions = [region, region[index_1].son];
					this.multiIndex = [index_1, index_2];
					this.addressMsg = region[index_1].text + ' ' + region[index_1].son[index_2].text;
					this.hanlerRegionIds(item.keys, index, [region[index_1].id, region[index_1].son[index_2].id]);
				} else if (item.level == 3) {
					if (item.default) {
						index_1 = region.findIndex(value => {
							return value.id == item.default[0];
						});

						index_2 = region[index_1].son.findIndex(value => {
							return value.id == item.default[1];
						});
						index_3 = region[index_1].son[index_2].son.findIndex(value => {
							return value.id == item.default[2];
						});
					}
					this.regions = [region, region[index_1].son, region[index_1].son[index_2].son];
					this.multiIndex = [index_1, index_2, index_3];
					this.addressMsg = region[index_1].text + ' ' + region[index_1].son[index_2].text + ' ' + region[index_1].son[index_2].son[index_3].text;
					this.hanlerRegionIds(item.keys, index, [region[index_1].id, region[index_1].son[index_2].id, region[index_1].son[index_2].son[index_3].id]);
				}
			}
		}
		this.dataModel = this.dataModel;
		this.$forceUpdate();
		
	},
	watch: {
		inputs(newVal, oldVal) {
			for (let index in this.inputs) {
				var item = this.inputs[index];
				if (item.type == 'date') {
					this.dateStr = item.default;
				}
				if (item.type != 'address') {
					if (item.default) {		
						this.dataModel[index] = { value: item.default };
					} else {
						if (!(oldVal.length > 0 &&this.dataModel[index]&& this.dataModel[index].value)) this.dataModel[index] = { value: '' };
					}
				} else {
					var index_1 = 0,
						index_2 = 0,
						index_3 = 0;
					if (item.level == 1) {
						if (item.default) {
							index_1 = region.findIndex(value => {
								return value.id == item.default[0];
							});
						}
						this.regions = [region];
						this.multiIndex = [index_1];
						this.addressMsg = region[index_1].text;
						this.hanlerRegionIds(item.keys, index, [region[index_1].id]);
					} else if (item.level == 2) {
						if (item.default) {
							index_1 = region.findIndex(value => {
								return value.id == item.default[0];
							});
							index_2 = region[index_1].son.findIndex(value => {
								return value.id == item.default[1];
							});
						}
						this.regions = [region, region[index_1].son];
						this.multiIndex = [index_1, index_2];
						this.addressMsg = region[index_1].text + ' ' + region[index_1].son[index_2].text;
						this.hanlerRegionIds(item.keys, index, [region[index_1].id, region[index_1].son[index_2].id]);
					} else if (item.level == 3) {
						if (item.default) {
							index_1 = region.findIndex(value => {
								return value.id == item.default[0];
							});

							index_2 = region[index_1].son.findIndex(value => {
								return value.id == item.default[1];
							});
							index_3 = region[index_1].son[index_2].son.findIndex(value => {
								return value.id == item.default[2];
							});
						}
						this.regions = [region, region[index_1].son, region[index_1].son[index_2].son];
						this.multiIndex = [index_1, index_2, index_3];
						this.addressMsg = region[index_1].text + ' ' + region[index_1].son[index_2].text + ' ' + region[index_1].son[index_2].son[index_3].text;
						this.hanlerRegionIds(item.keys, index, [region[index_1].id, region[index_1].son[index_2].id, region[index_1].son[index_2].son[index_3].id]);
					}
				}
			}
			this.dataModel = this.dataModel;
			this.$forceUpdate();
		}
	},
	methods: {
		confirm() {
			var _outPuts = '{';
			for (let index in this.inputs) {
				if (!this.handlerVerify(this.inputs[index], index)) {
					return false;
				}

				if (this.inputs[index].type != 'radio' && this.inputs[index].type != 'address') {
					_outPuts += '"' + this.inputs[index].key + '":"' + this.dataModel[index].value + '",';
				} else if (this.inputs[index].type == 'radio') {
					if (!this.dataModel[index].value) {
						var checked = this.inputs[index].range.filter(function(itemRange) {
							return itemRange.checked;
						});
						_outPuts += '"' + this.inputs[index].key + '":"' + checked[0].value + '",';
					} else {
						_outPuts += '"' + this.inputs[index].key + '":"' + this.dataModel[index].value + '",';
					}
				} else if (this.inputs[index].type == 'address') {
					for (let _index in this.dataModel[index]) {
						_outPuts += '"' + this.dataModel[index][_index].key + '":"' + this.dataModel[index][_index].value + '",';
					}
				}
			}
			_outPuts = _outPuts.substring(0, _outPuts.lastIndexOf(','));
			_outPuts += '}';
			var outPuts = JSON.parse(_outPuts);
			console.log(outPuts);
			this.$emit('confirm', outPuts);
		},
		radioChange(e) {
			this.dataModel[e.currentTarget.dataset.index].value = e.detail.value;
			this.inputs[e.currentTarget.dataset.index].default = e.detail.value;
		},
		bindMultiPickerColumnChange(e) {
			var level = e.currentTarget.dataset.level;
			switch (e.detail.column) {
				case 0:
					if (level == 1) {
						this.multiIndex = [e.detail.value];
					} else if (level == 2) {
						this.multiIndex = [e.detail.value, 0];
						this.regions[1] = region[e.detail.value].son;
					} else if (level == 3) {
						this.multiIndex = [e.detail.value, 0, 0];
						this.regions[1] = region[e.detail.value].son;
						this.regions[2] = region[e.detail.value].son[0].son;
					}
					break;
				case 1:
					if (level == 2) {
						this.multiIndex.splice(1, 1, 0);
					} else if (level == 3) {
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						this.regions[2] = region[this.multiIndex[0]].son[e.detail.value].son;
					}
					break;
				default:
					break;
			}
		},
		addressChange(e) {
			var _index = e.currentTarget.dataset.index;
			var _value = e.detail.value;
			var _tempRegion = [];
			if (_value.length >= 1) {
				_tempRegion.push(region[_value[0]].id || '');
				this.addressMsg = region[_value[0]].text;
			}
			if (_value.length >= 2) {
				_tempRegion.push(region[_value[0]].son[_value[1]].id || '');
				this.addressMsg = region[_value[0]].text + ' ' + region[_value[0]].son[_value[1]].text;
			}
			if (_value.length == 3) {
				_tempRegion.push(region[_value[0]].son[_value[1]].son[_value[2]].id || '');
				this.addressMsg = region[_value[0]].text + ' ' + region[_value[0]].son[_value[1]].text + ' ' + region[_value[0]].son[_value[1]].son[_value[2]].text;
			}
			var keys = this.inputs[e.currentTarget.dataset.index].keys;
			this.hanlerRegionIds(keys, _index, _tempRegion);
		},
		hanlerRegionIds(keys, _index, _tempRegion) {
			var _tempData = '[';
			for (var __index in keys) {
				_tempData += '{"key":"' + keys[__index] + '","value":"' + (_tempRegion[__index] || '') + '"},';
			}
			_tempData = _tempData.substring(0, _tempData.lastIndexOf(','));
			_tempData += ']';
			var tempData = JSON.parse(_tempData);
			this.dataModel[_index] = tempData;
		},
		handlerVerify(item, index) {
			if (item.required && !this.dataModel[index].value) {
				uni.showToast({
					title: item.errMsg || `${item.title}不能为空`,
					icon: 'none'
				});
				return false;
			} else {
				return true;
			}
		},
		bindDateChange(e) {
			var _index = e.currentTarget.dataset.index;
			var item = this.inputs[_index];
			item.default = e.target.value;
			this.$set(this.inputs, _index, item);
			this.dataModel[_index] = { value: e.target.value };
		}
	}
};
</script>

<style lang="scss" scoped>
.yxyl-inputs {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	.yxyl-input-item {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		font-size: 35rpx;
		border-bottom: 1px solid $uni-color-divider;
		.title {
			flex-basis: 30%;
			flex-grow: 1;
			flex-shrink: 1;
		}
		.content {
			// flex-basis: 70%;
			flex-grow: 1;
			flex-shrink: 1;
		}
		.yxyl-raido {
			padding-left: 20rpx;
		}
	}
}
.confirmText {
	width: 90%;
	margin: 0 auto;
	margin-top: 30rpx;
	background: $uni-color-main-dark;
}
</style>
